<template>
  <div id="MMDContainer">
    <div class="videoBox">
      <svg
        t="1605511863135"
        @click="goBack"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1154"
        width="200"
        height="200"
      >
        <path
          d="M438.4 297.6c12.8 12.8 12.8 28.8 3.2 41.6l-3.2 3.2L300.8 480H800c19.2 0 32 12.8 32 32 0 16-12.8 28.8-28.8 32H300.8l137.6 137.6c12.8 12.8 12.8 28.8 3.2 41.6l-3.2 3.2c-12.8 12.8-28.8 12.8-41.6 3.2l-3.2-3.2-192-192-3.2-3.2-3.2-3.2-3.2-3.2V499.2l3.2-3.2 3.2-3.2 3.2-3.2 192-192c12.8-12.8 32-12.8 44.8 0z"
          fill="#e6e6e6"
          p-id="1155"
        ></path>
      </svg>
      <video
        controls
        autoplay
        loop
        poster="url"
        class="video"
        :src="url"
      ></video>
    </div>

    <div class="UserBox">
      <div class="user-meun">
        <img
          class="user-icon"
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=713121847,2818845625&fm=15&gp=0.jpg"
        />
        <div class="user-name">
          <div>{{ title }}</div>
          <div>{{ attention }}关注</div>
        </div>
      </div>
    </div>

    <div class="MusicContent">
      <div class="name">{{ mvName }}</div>
      <div class="time">
        <div>{{ Count }}次播放</div>
        <div>{{ DateTime }}</div>
      </div>
      <div>
      <van-collapse v-model="activeName" accordion>
  <van-collapse-item title="视频介绍" name="1"> {{ Content }}</van-collapse-item>
</van-collapse>
     </div>
    </div>
     <van-card
      @click="goVideoView(item.id)"
      v-for="(item,index) in mvList" :key="index"
        :desc="item.name"
        :title="item.artistName"
        :thumb="item.cover"
      />
  </div>
</template>

<script>
import { getMv, getMvDetail, getWangyiMv } from "../../network/api/VideoApi";
export default {
  data() {
    return {
        activeName: '1',
      title: "小鹿一直撞",
      attention: "1",
      mvId: "",
      DateTime: "2020-12-12",
      Count: "301",
      mvName: "张艺兴核兴舞器战队《炎黄子孙》",
      Content: "krump跳《炎黄子孙》赠山河日月，不灭热血",
      url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
      mvList:[],
    };
  },
  mounted() {
    this.mvId = this.$route.query.id;
    getMv(this.mvId, 360).then((res) => {
      const { data } = res;
      this.url = data.data.url;
    }),
      getMvDetail(this.mvId).then((res) => {
        const { data } = res;
        this.mvName = data.data.name;
        this.title = data.data.artistName;
        this.Count = data.data.playCount;
        this.DateTime = data.data.publishTime;
        this.Content = data.data.desc;
      }),
      getWangyiMv(100).then((res) => {
        const { data } = res;
        this.mvList = data.data;
      });
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
       goVideoView(id){
      getMv(id, 360).then((res) => {
      const { data } = res;
      this.url = data.data.url;
      
    });
      
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 5000;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },watch:{
 
  }
};
</script>
<style scoped>
#MMDContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffff;
  display: flex;
  flex-direction: column;
}
#MMDContainer .videoBox {

  width: 100%;
  height: 200px;
  background: black;
  justify-content: center;
}
#MMDContainer .videoBox .video {
  width: 100%;
  height: 200px;
}
#MMDContainer .videoBox .icon {
  width: 40px;
  z-index: 10;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
}
#MMDContainer .UserBox {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}
#MMDContainer .UserBox .user-meun {
  display: flex;
}
#MMDContainer .UserBox .user-meun .user-icon {
  background: red;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
#MMDContainer .UserBox .user-meun .user-name {
  padding: 2px;
  padding-left: 5px;
  box-sizing: border-box;
}
#MMDContainer .UserBox .user-meun .user-name :nth-child(1) {
  font-weight: bold;
}
#MMDContainer .UserBox .user-meun .user-name :nth-child(2) {
  font-size: 10px;
  color: #3a3a3a;
}
#MMDContainer .UserBox .elbtn {
  display: flex;
  align-items: center;
}
#MMDContainer .MusicContent {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#MMDContainer .MusicContent > div {
  padding: 5px 5px 0 5px;
}
#MMDContainer .MusicContent .time {
  display: flex;
}
#MMDContainer .MusicContent .time > div {
  font-size: 13px;
  color: #3a3a3a;
}
#MMDContainer .MusicContent .time :nth-child(2) {
  padding-left: 5px;
}
#MMDContainer .MusicContent .bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
}
#MMDContainer .MusicContent .bottom > svg {
  width: 30px;
  height: 30px;
}
</style>